<template>
	<view class="select" @click="handleShowOptions">
		<view class="fixed-ba" v-if="showOptions"></view> 
		<view class="select__header" :class="{ 'disabled': disabled }">
			<text>{{ getSelectedLabel() }}</text>
			<text class="iconfont"
				:class="[{'icon-xiangshang2': showOptions, 'icon-caret-bottom': !showOptions}]"></text>
		</view>
		<view class="select__options" v-if="showOptions">
			<view v-for="(option, index) in options" :key="index" class="select__option"
				@click="handleOptionSelect(option)" :class="{'checked':isSelected(option)||value===option.value}">
				{{ option.label }}
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		model: {
			prop: 'value', 
			event: 'change',
		},
		props: {
			value: {
				type: [String, Number, Array],
				default: ''
			},
			options: {
				type: Array,
				default: () => []
			},
			disabled: {
				type: Boolean,
				default: false
			},
			multiple: {
				type: Boolean,
				default: false,
			},
		},
		data() {
			return {
				showOptions: false,
			};
		}, 
		methods: {
			handleShowOptions() {
				if (this.disabled) return;
				this.showOptions = !this.showOptions;
			},
			handleOptionSelect(option) {
				if (this.multiple) { // 多选
					const values = Array.isArray(this.value) ? this.value : [];
					const index = values.indexOf(option.value);
					if (index >= 0) {
						values.splice(index, 1);
					} else {
						values.push(option.value);
					}
					this.$emit('change', values);
					this.showOptions = false;
				} else { // 单选
					if (this.value === option.value) {
						this.showOptions = false; 
						return false;
					}
					this.$emit('change', option.value);
				}
			},
			getSelectedLabel() {
				if (this.multiple) { // 多选
					const selectedOptions = this.options.filter(option => this.value.indexOf(option.value) >= 0);
					return selectedOptions.map(option => option.label).join(', ') || '请选择';
				} else { // 单选
					const selectedOption = this.options.find(option => option.value === this.value);
					return selectedOption ? selectedOption.label : '请选择';
				}
			},
			isSelected(option) {
				if (!this.multiple) return false;
				return Array.isArray(this.value) && this.value.indexOf(option.value) >= 0;
			},
		},
	};
</script>

<style scoped>
	.fixed-ba {
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		z-index: 999;
	}

	.select {
		position: relative;
		cursor: pointer;
		width: 100%;
	}

	.select__header {
		padding: 14rpx;
		border: 1px solid #dadada;
		border-radius: 5px;
		position: relative;
		box-sizing: border-box;
		display: flex;
		gap: 0 8px;
		align-items: center;
		justify-content: space-between;
		word-break: break-all;
	}

	.select__header .iconfont {
		/* position: absolute;
		right: 6px;
		top: 50%;
		transform: translateY(-50%); */
	}

	.select__options {
		position: absolute;
		top: 100%;
		left: 0;
		right: 0;
		z-index: 999;
		background-color: #fff;
		border: 1px solid #ccc;
		border-top: none;
		border-radius: 0 0 5px 5px;
		overflow-y: auto;
		max-height: 200px;
	}

	.select__option {
		padding: 10px;
		cursor: pointer;
		box-sizing: border-box;
		position: relative;
	}

	.select__option .iconfont {
		position: absolute;
		right: 6px;
		top: 50%;
		transform: translateY(-50%);
	}

	.select__option:hover {
		background-color: #eee;
	}

	.disabled {
		background-color: #ccc;
		color: #666;
		cursor: not-allowed;
	}

	.checked {
		background-color: #1fcd95;
		color: white;
	}
</style>